<!DOCTYPE html>
<html lang="en">
<head th:replace="_th-fragment-template :: head-template"><title></title></head>
<body>

<nav th:replace="_th-fragment-template :: nav-menu-template(5)"></nav>

<div class="ui basic segment">
    <div class="ui stackable grid">
        <div class="one wide column"></div>
        <div class="fourteen wide column">
            <div class="ui raised segment">

                <div class="ui stackable grid">
                    <div class="one wide column"></div>
                    <div class="fourteen wide column">

                    </div>
                    <div class="one wide column"></div>
                </div>

                <!-- 留言框 -->
                <a href="#" class="ui yellow basic ribbon label"><h1>留言区</h1></a>
                <!-- 留言预览 -->
                <div class="ui bottom segment">
                    <div class="ui basic segment">
                        <div class="ui threaded comments">
                            <div class="comment">
                                <a class="avatar">
                                    <img src="/images/avatar/small/matt.jpg">
                                </a>
                                <div class="content">
                                    <a class="author">Matt</a>
                                    <div class="metadata">
                                        <span class="date">今天下午 5:42</span>
                                    </div>
                                    <div class="text">太赞了！ </div>
                                    <div class="actions">
                                        <a class="reply">Reply</a>
                                    </div>
                                </div>
                            </div>
                            <div class="comment">
                                <a class="avatar">
                                    <img src="/images/avatar/small/elliot.jpg">
                                </a>
                                <div class="content">
                                    <a class="author">Elliot Fu</a>
                                    <div class="metadata">
                                        <span class="date">昨天上午12:30</span>
                                    </div>
                                    <div class="text">
                                        <p>這對我的研究是非常有用.謝謝!</p>
                                    </div>
                                    <div class="actions">
                                        <a class="reply">Reply</a>
                                    </div>
                                </div>
                                <div class="comments">
                                    <div class="comment">
                                        <a class="avatar">
                                            <img src="/images/avatar/small/jenny.jpg">
                                        </a>
                                        <div class="content">
                                            <a class="author">Jenny Hess</a>
                                            <div class="metadata">
                                                <span class="date">刚刚</span>
                                            </div>
                                            <div class="text">艾略特你永远是多么正确 :) </div>
                                            <div class="actions">
                                                <a class="reply">Reply</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment">
                                <a class="avatar">
                                    <img src="/images/avatar/small/joe.jpg">
                                </a>
                                <div class="content">
                                    <a class="author">Joe Henderson</a>
                                    <div class="metadata">
                                        <span class="date">5 天以前</span>
                                    </div>
                                    <div class="text">老兄，这太棒了。非常感谢。 </div>
                                    <div class="actions">
                                        <a class="reply">Reply</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 输入留言 -->
                <a href="#" class="ui green basic ribbon label"><h1>写留言</h1></a>

                <div class="ui basic segment">
                    <div class="ui form">
                        <div class="field">
                            <textarea name="content" placeholder="都看到这了，不妨留言评论一下？"></textarea>
                        </div>
                    </div>
                </div>
                <!-- 留言底部 输入+按钮 -->
                <div class="ui basic segment">
                    <div class="ui mini form">

                        <div class="ui two column grid">
                            <div class="column">

                                <div class="fields">
                                    <div class="ui icon input">
                                        <i class="user icon"></i>
                                        <div class="field custom-mobile-wide custom-margin-bottom-mini"><input type="text" name="nickname" placeholder="个性昵称"></div>
                                    </div>
                                    <div class="ui icon input">
                                        <i class="mail icon"></i>
                                        <div class="field custom-mobile-wide custom-margin-bottom-mini"><input type="text" name="email" placeholder="个人邮箱"></div>
                                    </div>
                                    <div class="ui icon input">
                                        <i class="tv icon"></i>
                                        <div class="field custom-mobile-wide custom-margin-bottom-mini"><input type="text" name="website" placeholder="个人网站"></div>
                                    </div>

                                </div>
                            </div>
                            <div class="right aligned column">
                                <div class="field custom-margin-bottom-mini custom-mobile-wide">
                                    <button class="positive ui button">
                                        <i class="edit icon"></i> 发布
                                    </button>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

            </div>
        </div>
        <div class="one wide column"></div>
    </div>
</div>




<script>
    $('.menu.toggle').on('click', function (){
        $('.click-to-show-nav-menu-list').toggleClass('custom-mobile-hide-menu');
    });
</script>


</body>
</html>